<template>
  <section>
    <div v-for="index in 200" :key="index">
      <span></span>
    </div>
    <!-- 登录页面 -->
    <transition name="slide-left">
      <div class="sign" v-if="!isRegisterVisible">
        <div class="content">
          <h2>登录</h2>
          <form @submit.prevent="handleLogin" class="content">
          <div class="form">
            <div class="inputBx">
              <input type="text" required v-model="username">
              <i>用户名</i>
            </div>
            <div class="inputBx">
              <input type="password" required v-model="password">
              <i>密码</i>
            </div>
            <div class="links">
              <a href="#">忘记密码</a>
              <a href="#" @click="showRegister">注册</a>
            </div>
            <div class="inputBx">
              <input type="submit" value="登录">
            </div>
          </div>
          </form>
        </div>
      </div>
    </transition>
    <!-- 注册页面 -->
    <transition name="slide-right">
      <div class="sign" v-if="isRegisterVisible">
        <div class="content">
          <h2>注册</h2>
          <div class="form">
            <div class="inputBx">
              <input type="text" required v-model="registerUsername">
              <i>账号</i>
            </div>
            <div class="inputBx">
              <input type="password" required v-model="registerPassword">
              <i>密码</i>
            </div>
            <div class="inputBx">
              <input type="email" required v-model="registerEmail">
              <i>邮箱</i>
            </div>
            <div class="links">
              <a href="#" @click="showLogin">返回登录</a>
            </div>
            <div class="inputBx">
              <input type="submit" value="注册" @click="handleRegister">
            </div>
          </div>
        </div>
      </div>
    </transition>
  </section>
</template>

<script setup lang="js">
import { API_BASE_URL } from '@/config/config';
import { ref } from 'vue'
import {useRouter} from 'vue-router'
import axios from 'axios'
import { ElMessage } from 'element-plus'
const username = ref('')
const password = ref('')
const router = useRouter();
let registerUsername = ref('');
let registerPassword = ref('');
let registerEmail = ref('');
const isRegisterVisible = ref(false);
// 登录处理函数
const handleLogin = async () => {
  const Login_URL = `${API_BASE_URL}/login`;
  // 登录逻辑
  try {
    const response = await axios.post(Login_URL,null,{
      params:{
        account: username.value,
        password: password.value
      },withCredentials:true
    })
    //检查响应的状态
    if(response.data.code === 200){
      ElMessage.success("登陆成功！")
      router.push('/Home');
    }else {
      ElMessage.error("登陆失败！"+response.data.message);
    }
  }catch (error){
    ElMessage.error("登陆失败："+error.message);
  }
}
const handleRegister =async()=> {
  const REGISTER_URL = `${API_BASE_URL}/register`;
  try{
    const response = await axios.post(REGISTER_URL,null,{
      params:{
        account:registerUsername.value,
        password:registerPassword.value,
        email:registerEmail.value
      }
    });
    if(response.data.code === 200){
      ElMessage.success("注册成功！")
      showLogin();
      cleanRegisterInput();
    }
  }catch (error){
    ElMessage.error("注册失败："+error.message)
  }
}
const cleanRegisterInput = ()=>{
   registerUsername = ref('');
  registerPassword = ref('');
   registerEmail = ref('');
}
// 显示注册页面
const showRegister = () => {
  isRegisterVisible.value = true;
};

// 显示登录页面
const showLogin = () => {
  isRegisterVisible.value = false;
};
</script>
<style scoped>
@import url(https://fonts.googleapis.com/css2?family=Quicksand:wght@400&display=swap);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Quicksand', sans-serif;
}

section {
  position: absolute;
  right: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  overflow: hidden;
  background-color: black;
}

section::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(#000, #0f0, #000);
  animation: animate 5s linear infinite;
}

@keyframes animate {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(100%);
  }
}

span {
  position: relative;
  display: block;
  width: calc(6.25vw - 2px);
  height: calc(6.25vw - 2px);
  background: #181818;
  z-index: 2;
  transition: 1.5s;
}

section span:hover {
  background: #0f0;
  transition: 0s;
}

section .sign {
  position: absolute;
  width: 400px;
  background: #222;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  border-radius: 4px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

section .sign .content {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 40px;
}

section .sign .content h2 {
  font-size: 2em;
  color: #0f0;
}

section .sign .content .form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

section .sign .content .form .inputBx {
  position: relative;
  width: 100%;
}

section .sign .content .form .inputBx input {
  position: relative;
  width: 100%;
  background: #333;
  border: none;
  outline: none;
  padding: 25px 10px 7.5px;
  color: #fff;
  font-weight: 500;
  font-size: 1em;
}
section .sign .content .form .inputBx i {
  position: absolute;
  left: 0;
  padding: 15px 10px;
  font-style: normal;
  color: #aaa;
  transition: 0.5s;
  pointer-events: none;
}

.sign .content .form .inputBx input:focus ~ i,
.sign .content .form .inputBx input:valid ~ i {
  transform: translateY(-7.5px);
  font-size: 0.8em;
  color: #fff;
}

.sign .content .form .links {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.sign .content .form .links a {
  color: #fff;
  text-decoration: none;
}

.sign .content .form .links a:nth-child(2) {
  color: #0f0;
  font-weight: 600;
}

.sign .content .form .inputBx input[type="submit"] {
  padding: 10px;
  background: #0f0;
  color: #111;
  font-weight: 600;
  font-size: 1.25em;
  letter-spacing: 0.05em;
  cursor: pointer;
}

@media (max-width: 900px) {
  section span {
    width: calc(10vw - 2px);
    height: calc(10vw - 2px);
  }
}

@media (max-width: 600px) {
  section span {
    width: calc(20vw - 2px);
    height: calc(20vw - 2px);
  }
}

/* 动画类 */
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: opacity 0.5s ease-in-out,transform 0.5s ease-in-out;
}

.slide-left-enter-from,
.slide-left-leave-to {
  opacity:0;
  transform: translateX(-100%);
}

.slide-left-enter-to,
.slide-left-leave-from {
  opacity:1;
  transform: translateX(0);
}

.slide-right-enter-from,
.slide-right-leave-to {
  opacity: 0;
  transform: translateX(100%);
}

.slide-right-enter-to,
.slide-right-leave-from {
  opacity: 1;
  transform: translateX(0);
}
</style>
